<template>
	<view>
		
		<!-- 顶部选项卡 -->
		<scroll-view scroll-x="true" class="border-bottom scroll-row" style="height: 80rpx;" :scroll-into-view="scrollinto" :scroll-with-animation="true">
			<view class="scroll-row-item px-3" 
			@click="changeTab(index)"
			style="height: 80rpx;line-height: 80rpx;" 
			v-for="(item,index) in tabBars" 
			:key="index" 
			:class="tabIndex==index?'main-text-color':''"
			:id="'tab'+index"
			>
				<text class="font-md">{{item.name}}</text>
			</view>
		</scroll-view>
		
		<swiper @change="onchangeTab" :duration="150" :current="tabIndex" :style="'height:'+scrollH+'px;'">
			<swiper-item v-for="(item,index) in newsitems" :key="index">
				<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'" @scrolltolower="loadmore(index)">
					<!-- 轮播图组件 -->
					<!-- 无插槽的组件可以写成单标签的形式 -->
					
					<block v-for="(list,listIndex) in item.list" :key="listIndex">
						<swiperImage v-if="list.type === 'swiper'"  :resdata="list.data"/>
						
						<!-- 首页分类 -->
						<navs v-if="list.type === 'indexnav'" :indexnavs="list.data"/>
						
						<!-- 全局分割线 -->
						<divider/>
						
						<!-- 三图广告 -->
						<threeAdv v-if="list.type === 'threeAdv'" :threeAdv="list.data"/>
						
						<divider/>
						
						<!-- 大图广告位 -->
						<!-- <card headTitle="每日精选" bodyCovers="/static/images/demo/demo4.jpg"/> -->
						
						<!-- 公共列表组件 -->
						<view class="row j-sb">
							<block v-if="list.type === 'commonList'" v-for="(item2,index2) in list.data" :key="index2">
								<commomList :item="item2" :index="index2"/>
							</block>
						</view>
					</block>
					<!-- 上拉加载更多 -->
					<divider/>
					<view class="d-flex a-center j-center text-light-muted font-sm py-3">{{item.loadtext}}</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		
		
	</view>
</template>

<script>
	//模拟后端数据
	let demoTabars = [
		{
			name:'关注'
		},
		{
			name:'推荐'
		},
		{
			name:'体育'
		},
		{
			name:'热点'
		},
		{
			name:'财经'
		},
		{
			name:'娱乐'
		},
		{
			name:'军事'
		}
	];
	let demo1 = [
		{
			type:'swiper',
			data:[
				{
					id:1,
					src:'/static/images/demo/demo4.jpg'
				},
				{
					id:2,
					src:'/static/images/demo/demo4.jpg'
				},
				{
					id:3,
					src:'/static/images/demo/demo4.jpg'
				}
			]
		},
		{
			type:'indexnav',
			data:[
				{
					src:'/static/images/indexnav/1.png',
					text:'新品发布'
				},
				{
					src:'/static/images/indexnav/2.gif',
					text:'小米众筹'
				},
				{
					src:'/static/images/indexnav/3.gif',
					text:'以旧换新'
				},
				{
					src:'/static/images/indexnav/4.gif',
					text:'一分拼团'
				},
				{
					src:'/static/images/indexnav/5.gif',
					text:'超值特卖'
				},
				{
					src:'/static/images/indexnav/6.gif',
					text:'小米秒杀'
				},
				{
					src:'/static/images/indexnav/7.gif',
					text:'真心想要'
				},
				{
					src:'/static/images/indexnav/8.gif',
					text:'电视热卖'
				},
				{
					src:'/static/images/indexnav/9.gif',
					text:'家电热卖'
				},
				{
					src:'/static/images/indexnav/10.gif',
					text:'米粉卡'
				}
			]
		},
		{
			type:'threeAdv',
			data:{
				big:{
					src:'/static/images/demo/demo1.jpg'
				},
				smalltop:{
					src:'/static/images/demo/demo2.jpg'
				},
				smallbottom:{
					src:'/static/images/demo/demo3.jpg'
				}
			}
		},
		{
			type:'commonList',
			data:[
				{
					cover:'/static/images/demo/list/1.jpg',
					title:'米家空调',
					desc:'1.5匹变频',
					oprice:'2699',
					pprice:'1399'
				},
				{
					cover:'/static/images/demo/list/2.jpg',
					title:'米家空调',
					desc:'1.5匹变频',
					oprice:'2699',
					pprice:'1399'
				},
				{
					cover:'/static/images/demo/list/3.jpg',
					title:'米家空调',
					desc:'1.5匹变频',
					oprice:'2699',
					pprice:'1399'
				},
				{
					cover:'/static/images/demo/list/4.jpg',
					title:'米家空调',
					desc:'1.5匹变频',
					oprice:'2699',
					pprice:'1399'
				},
				{
					cover:'/static/images/demo/list/5.jpg',
					title:'米家空调',
					desc:'1.5匹变频',
					oprice:'2699',
					pprice:'1399'
				},
				{
					cover:'/static/images/demo/list/6.jpg',
					title:'米家空调',
					desc:'1.5匹变频',
					oprice:'2699',
					pprice:'1399'
				}
			]
		}
	];
	let demo2 =[
		{
			type:'indexnav',
			data:[
				{
					src:'/static/images/indexnav/6.gif',
					text:'小米秒杀'
				},
				{
					src:'/static/images/indexnav/7.gif',
					text:'真心想要'
				},
				{
					src:'/static/images/indexnav/8.gif',
					text:'电视热卖'
				},
				{
					src:'/static/images/indexnav/9.gif',
					text:'家电热卖'
				},
				{
					src:'/static/images/indexnav/10.gif',
					text:'米粉卡'
				}
			]
		},
		{
			type:'commonList',
			data:[
				{
					cover:'/static/images/demo/list/1.jpg',
					title:'米家空调',
					desc:'1.5匹变频',
					oprice:'2699',
					pprice:'1399'
				},
				{
					cover:'/static/images/demo/list/2.jpg',
					title:'米家空调',
					desc:'1.5匹变频',
					oprice:'2699',
					pprice:'1399'
				},
				{
					cover:'/static/images/demo/list/3.jpg',
					title:'米家空调',
					desc:'1.5匹变频',
					oprice:'2699',
					pprice:'1399'
				},
				{
					cover:'/static/images/demo/list/4.jpg',
					title:'米家空调',
					desc:'1.5匹变频',
					oprice:'2699',
					pprice:'1399'
				},
				{
					cover:'/static/images/demo/list/5.jpg',
					title:'米家空调',
					desc:'1.5匹变频',
					oprice:'2699',
					pprice:'1399'
				},
				{
					cover:'/static/images/demo/list/6.jpg',
					title:'米家空调',
					desc:'1.5匹变频',
					oprice:'2699',
					pprice:'1399'
				}
			]
		}
	];
	let demo3 =[
		{
			type:'commonList',
			data:[
				{
					cover:'/static/images/demo/list/1.jpg',
					title:'米家空调',
					desc:'1.5匹变频',
					oprice:'2699',
					pprice:'1399'
				},
				{
					cover:'/static/images/demo/list/2.jpg',
					title:'米家空调',
					desc:'1.5匹变频',
					oprice:'2699',
					pprice:'1399'
				},
				{
					cover:'/static/images/demo/list/3.jpg',
					title:'米家空调',
					desc:'1.5匹变频',
					oprice:'2699',
					pprice:'1399'
				},
				{
					cover:'/static/images/demo/list/4.jpg',
					title:'米家空调',
					desc:'1.5匹变频',
					oprice:'2699',
					pprice:'1399'
				},
				{
					cover:'/static/images/demo/list/5.jpg',
					title:'米家空调',
					desc:'1.5匹变频',
					oprice:'2699',
					pprice:'1399'
				},
				{
					cover:'/static/images/demo/list/6.jpg',
					title:'米家空调',
					desc:'1.5匹变频',
					oprice:'2699',
					pprice:'1399'
				}
			]
		}
	];
	import swiperImage from '@/components/index/swiper-image.vue';
	import navs from '@/components/index/index-nav.vue';
	import threeAdv from '@/components/index/three-adv.vue';
	import card from '@/components/common/card.vue';
	import test from '@/components/index/test.vue';
	import commomList from '@/components/common/common-list.vue';
	export default {
		components:{swiperImage,navs,threeAdv,card,test,commomList},
		data() {
			return {
				scrollH:500,
				scrollinto:'',
				tabIndex:0,
				tabBars:[],
				newsitems:[],
				test:0,
			}
		},
		onLoad() {
			// 获取可视区域高度
			uni.getSystemInfo({
				success: (res) => {
					// 获取到的当前可视区域的高度-已知元素的高度rpx,需要进行转换;
					this.scrollH = res.windowHeight - uni.upx2px(82);
				}
			});
			//初始化事件
			this.__init();
		},
		methods: {
			// 初始化事件
			__init(){
				// 获取顶部选项卡
				this.tabBars = demoTabars;
				//根据顶部选项卡生成页面
				let arr = [];
				for (var i = 0;i<this.tabBars.length;i++) {
					let obj = {
						list:[],
						// 1.上拉加载更多 2.加载中....  3.没有更多了
						loadtext:'上拉加载更多'
					};
					//获取首屏数据
					if(i===0){
						obj.list = demo1;
					}
					arr.push(obj)
				};
				this.newsitems = arr;
			},
			// 切换选项卡
			changeTab(index){
				if(this.tabIndex === index){
					return;
				}
				this.tabIndex = index;
				this.scrollinto = 'tab'+index;
				this.addData();
			},
			//监听滑动列表
			onchangeTab(e){
				this.changeTab(e.detail.current);
			},
			// 加载数据
			addData(){
				// 拿到当前索引
				let index = this.tabIndex;
				console.log('index',index);
				//请求数据库
				this.newsitems[index].list = demo2; 
				if(index === 0){
					this.newsitems[index].list = demo1;
				}
			},
			// 上拉加载更多
			loadmore(index){
				var vm = this;
				var times = vm.test;
				let item = vm.newsitems[index];
				times++;
				vm.test= times++;
				//是否处于可加载状态
				if(item.loadtext !== '上拉加载更多'){
					return;
				};
				// 模拟加载状态
				item.loadtext = '加载中....';
				setTimeout(()=>{
					console.log('vm.test',vm.test);
					if(vm.test<4){
						//加载数据
						item.list = [
							// 扩展运算符可以应用于合并数组
							...item.list,...demo3
							];
							
							//恢复状态
							item.loadtext = '上拉加载更多';
					}
					if(vm.test == 4){
						item.loadtext = '哼~😕我也是有底线的~';
					}
					
				},1000)
				
			}
			
		}
	}
</script>

<style>
	scroll-view ::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
	}
</style>
